<template>
  <div class="">
    <x-header class="header" :left-options="{backText: ''}">{{title}}</x-header>
    <div class="content">
      <Chart width="100%" height="350px" :option="optionPie" theme='macarons' loading></Chart>
      
      <ul>
        <li v-for="(x,i) of pieData" :key="i"  class="ub pad my-item" @click="handleItem(x)">
            <div class="title uf-1">{{x.name}}</div>
            <div class="value">{{x.value}}</div>
            <div class="ub uc t-gray">
                <i class="fa fa-chevron-right"></i>
            </div>
        </li>
      </ul>
      <popup-picker :data="list" :columns="3" v-model="value" :show="showPicker" show-name @on-hide="showPicker=false" @on-change="onChange"></popup-picker>
    </div>
  </div>
</template>

<script>
import { XHeader, PopupPicker } from "vux";
import Chart from "@/components/Chart";
export default {
  name: "resourceOne",
  data() {
    return {
      source: this.$route.params["source"] || "XDL",
      pieData: {},
      optionPie: {},
      items: [],
      code1: "",
      list: [],
      value: [],
      showPicker: false
    };
  },
  watch: {
    pieData: "drawPie"
  },
  computed: {
    title() {
      return this.$store.state.resource.headerTitle;
    }
  },
  mounted() {
    this.$store
      .dispatch("resource_status_pro", { source: this.source })
      .then(resp => {
        var items = [];
        for (var i = 0; i < resp.data.length; i++) {
          if (resp.data[i].name && resp.data[i].name != "") {
            items.push(resp.data[i]);
          }
        }
        this.pieData = items;
      });
  },
  methods: {
    drawPie() {
      this.optionPie = {
        title: {
          // text: '全区物资类型分布',
          left: "right"
        },
        tooltip: {},
        itemStyle: {
          normal: {
            shadowBlur: 30,
            shadowColor: "rgba(0, 0, 0, 0.4)"
          }
        },
        series: [
          {
            name: "物资类型",
            type: "pie",
            radius: "55%",
            data: this.pieData
          }
        ]
      };
    },
    handleItem(x) {
      this.list = [];
      this.code1 = x.code;
      var lv1 = _.find(this.pieData, { code: x.code });
      if (lv1.list1) {
        _.forEach(lv1.list1, n => {
          this.list.push({ name: n.name, value: n.code, parent: 0 });
          if (n.list1) {
            _.forEach(n.list1, m => {
              this.list.push({ name: m.name, value: m.code, parent: n.code });
            });
          }
        });
        // console.log(this.list)
      }

      this.showPicker = true;
    },
    onChange(value) {
      console.log(value);
      if (value.length == 1) {
        this.$router.push({
          name: "ResourceDetail",
          params: { code1: this.code1, code2: value[0] }
        });
      } else {
        this.$router.push({
          name: "ResourceDetail",
          params: { code1: this.code1, code2: value[0], code3: value[1] }
        });
      }
    }
  },
  components: {
    XHeader,
    PopupPicker,
    Chart
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
li {
  .title {
    padding-left: 20px;
  }

  i {
    margin-left: 10px;
  }
}
</style>